<template>
  <view class="IconLabel class">
    <XImage
      :src="image"
      class="Image"
      :style="{
        width: iconWidth,
        height: iconHeight,
        'border-radius': circleIcon ? '100%' : 'none',
      }"
      :mode="iconHeight ? 'aspectFill' : 'widthFix'"
    />
    <text>{{ label }}</text>
  </view>
</template>
<script lang="ts">
import Vue from '@/utils/Vue';
import XImage from '@/components/XImage.vue';

interface IData {}

export default Vue.extend({
  data(): IData {
    return {};
  },
  components: {
    XImage,
  },
  props: {
    image: String,
    label: String,
    circleIcon: {
      type: Boolean,
      default: false,
    },
    iconWidth: {
      type: String,
      default: '14px',
    },
    iconHeight: {
      type: String,
      default: '',
    },
  },
  methods: {},
  options: { virtualHost: true },
  externalClasses: ['class'],
});
</script>
<style lang="less" scoped>
.IconLabel {
  display: flex;
  align-items: center;
  font-size: 14px;
  .Image {
    margin-right: 5px;
  }
}
</style>
